<template>
  <form class="validate-form-container">
    <slot name="default"></slot>
    <div class="submit-area" @click.prevent="submitForm">
      <slot name="submit">
        <!-- 什么都不填就是下面默认的 -->
        <button type="submit" class="btn btn-primary">提交</button>
      </slot>
    </div>
  </form>
</template>
<script setup lang="ts">
import { onUnmounted } from 'vue';
import { emitter, type ValidateFunc, type ValidateClear } from '../util/util_mitt';
// 获取父组件的 自定义事件
let emits = defineEmits(['form-submit'])
// 表单提交的点击事件函数
const submitForm = () => {
  // 执行 每个input 子组件的 验证方法（两个）
  // map 返回数组执行的 布尔数组，every只要一个为false 就是false
  let result = arrayFunc.map(func => func()).every(result => result)
  // 触发form-submit自定义事件 并返回结果result
  emits('form-submit', result)
  if (!result) {
    arrayClear.forEach(func => func())
  }
}
let arrayFunc: ValidateFunc[] = []
let arrayClear: ValidateClear[] = []
const callback = (func: ValidateFunc) => {
  // 子组件每次挂载完成会触发 自定义函数form-item-created 都会调用这个方法， 
  // 子组件有两个 会调用两次，此时arrayFunc 就或有两个元素
  arrayFunc.push(func)
}
const clearCalback = (func: ValidateClear) => {
  arrayClear.push(func)
}
// 绑定绑定一个自定义函数 form-item-created 如果触发 就执行callback 函数
emitter.on('form-item-created', callback)
emitter.on('clear-inputs', clearCalback)
// 组件销毁之前 删除 form-item-created 事件, 清除arrayFunc 数组
onUnmounted(() => {
  // 在这个声明周期去清除自定义事件
  emitter.off('form-item-created', callback)
  emitter.off('clear-inputs', clearCalback)
  // 数组为空
  arrayFunc = []
  arrayClear = []
})
  // 绑定清除input value
</script>